<!--热门新闻-->
<section class="news-list" id="newsFocus">
    <template v-for="item in list | orderBy 'Date' -1 ">
        <div class="news-item p-clear-fix">
            <a href="news-detail.html?id={{item.Id}}" class="p-clear-fix">
                <div class="img-box">
                    <img src="http://dotacdn.esportsmatrix.com/Content/images/uploaded/news/4e9af3ac-262f-45f9-acb7-f7e45460284b.jpg">
                </div>

                <div class="info-box">
                    <h3>{{item.Title}}</h3>
                    <div class="desc-box p-clear-fix">
                        <div class="l"  v-bind:class="{
                         'color-location-NA': item.Area=='NA',
                         'color-location-CN': item.Area=='CN',
                         'color-location-KR': item.Area=='KR',
                         'color-location-TW': item.Area=='TW',
                          'color-location-EU':  item.Area=='EU' }"><span >{{item.Area}}</span></div>
                        <div class="r">{{item.Date | formatDate}}</div>
                    </div>
                </div>
            </a>
        </div>
    </template>

    <div class="load-more">
        <div class="load-wrap hide">
            <div class="loader">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
            <div class="loader-text" >正在加载...</div>
        </div>
        <div class="none-data" >已经没有了</div>
        <div class="load-fail">加载失败，戳我重新加载。</div>
    </div>
</section>